<template>
	<view class="content">
		<z-paging ref="paging" v-model="imgList" @query="queryList" :fixed="false" >
			<template #empty>
				<u-empty mode="data">
				</u-empty>
			</template>
			<view class="container">
				<view hidden>
					<block v-for="item in imgList" :key="item.id">
						<image :src="item.imgUrl" :data-url="item.imgUrl" @load="loadImg">
							</iamge>
					</block>
				</view>
				<view class="cont-box" v-for="(list, index) in waterfall" :key="index"
					:class="index === 0 ? 'left_list' : 'right_list'">
					<view v-for="item in list.list" :key="item.id" class="card">
						<image class="card_img" :src="item.imgUrl" mode="widthFix"></image>
						<view class="card_info">
							<view class="tit-tip multi-line-omit">{{ item.title }}</view>
							<view class="bottom-tip">
								<view class="profile_container">
									<image class="profile" :src="item.profile" mode="center" />
									<view class="name multi-line-omit">{{ item.name }}</view>
								</view>
								<image v-if="index % 2 === 0" class="love_btn" :src="heart1" mode="aspectFit" />
								<image v-if="index % 2 !== 0" class="love_btn" :src="heart2" mode="aspectFit" />
							</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
		<ELM ref="elm" :msg="tipMsg" :isConfirm="isConfirm" @confirm="confirm"></ELM>
		<login @change="getUserInfo" :isLoginPop="isLoginPop" class="my-select"></login>
	</view>
</template>

<script>
	import ItemVue from './Item.vue'
	import empty from '@/components/empty.vue'
	import login from '../../components/login/login.vue'
	import ELM from '../../components/elm-toast/index.vue';
	import heart1 from '@/static/images/heart1.png'
	import heart2 from '@/static/images/heart2.png'
	export default {
		components: {
			ItemVue,
			empty,
			ELM,
			login
		},
		data() {
			return {
				heart1,
				heart2,
				isFirstFetch: false, // 是否是首次请求
				isLoginPop: false, // 是否未登录
				tipMsg: '',
				isConfirm: false,
				imgList: [],
				lists: [], // 备份imgList用的数组，方便操作
				waterfall: [
					// 用于记录当前列的高度，不在方法中保存是为了上拉获取新数据也能使用
					// 因为默认手机显示，可以固定两列
					// 如果是做自适应或者电脑端多列，可以动态插入实现多列
					{
						height: 0,
						list: []
					}, {
						height: 0,
						list: []
					}
				]
			}
		},
		props: {
			userInfo: {
				type: Object,
				default: function() {
					return {}
				}
			}
		},
		computed: {

		},
		watch: {
			// 监听数据源，如果有新值传入，则用lists数组备份
			imgList(data) {
				console.log(data, '监听搞到了')
				data.length && this.lists.push(...data);
			}
		},
		created() {},
		async mounted() {
			this.lists = this.imgList; // Vue创建data后立即备份
			this.queryList()
			setTimeout(() => {
				this.queryList()
			}, 5000)
		},
		methods: {
			onRefresh() {
				// 告知z-paging下拉刷新结束，这样才可以开始下一次的下拉刷新
				setTimeout(() => {
					// 1.5秒之后停止刷新动画
					this.$refs.paging.complete();
				}, 1500)
			},
			close() {
				this.$emit("changeOpen", false)
			},
			open() {
				this.$emit("changeOpen", true)
			},
			selectShare(item) {
				this.$emit("selectShare", item)
			},
			reload() {
				this.$nextTick(() => {
					// 刷新列表数据(如果不希望列表pageNo被重置可以用refresh代替reload方法)
					this.$refs.paging && this.$refs.paging.reload();
				})
			},
			async queryList() {
				// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				// const params = {
				// 	pageIndex: pageNo,
				// 	pageSize: pageSize,
				// 	type: this.tabIndex
				// }
				const arr = [{
						id: Math.random(999999),
						imgUrl: "http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960",
						title: "美女美女",
						name: '美女',
						profile: 'https://img2.baidu.com/it/u=3139868205,3123931976&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800'
					},
					{
						id: Math.random(999999),
						imgUrl: "http://gips3.baidu.com/it/u=1821127123,1149655687&fm=3028&app=3028&f=JPEG&fmt=auto?w=720&h=1280",
						title: "你好你好",
						name: '454545',
						profile: 'https://img2.baidu.com/it/u=3139868205,3123931976&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800'
					},
					{
						id: Math.random(999999),
						imgUrl: "http://gips1.baidu.com/it/u=1658389554,617110073&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960",
						title: "asdasd",
						name: '擦边',
						profile: 'https://img2.baidu.com/it/u=3139868205,3123931976&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800'
					},
					{
						id: Math.random(999999),
						imgUrl: "https://gips2.baidu.com/it/u=1651586290,17201034&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f600_800",
						title: "啊实打实的",
						name: '9a8s9das',
						profile: 'https://img2.baidu.com/it/u=3139868205,3123931976&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800'
					},
					{
						id: Math.random(999999),
						imgUrl: "http://gips1.baidu.com/it/u=1647344915,1746921568&fm=3028&app=3028&f=JPEG&fmt=auto?w=720&h=1280",
						title: "chengzi",
						name: '橙子',
						profile: 'https://img2.baidu.com/it/u=3139868205,3123931976&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800'
					},
					{
						id: Math.random(999999),
						imgUrl: 'http://gips2.baidu.com/it/u=2055042668,1190219470&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280',
						title: "asdasdasd",
						name: '你好安师大按时的那送到家扫地机奥斯卡就到了卡死',
						profile: 'https://img2.baidu.com/it/u=3139868205,3123931976&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800'
					}
				];
				this.$refs.paging.complete(arr);
				console.log('出发了')
			},
			itemClick(item) {
				console.log('点击了', item.title);
			},
			loadImg(e) {
				console.log((e))
				let Root = this.waterfall;
				let height = e.detail.height;
				// 根据当前高度决定将新数据给谁，并更新列高度；优先插入左侧
				const url = e.target.dataset.url || ''
				// 重复图片，不需要插入到瀑布流里
				if(Root[0].list.findIndex(item => item.imgUrl === url) > -1) {
					console.log('重复')
					return
				};
				if (Root[0].height <= Root[1].height) {
					// 考虑热度优先的问题， 所以用的是shift()方法推出头部数据。
					Root[0].list.push(this.lists.shift())
					Root[0].height += height;
				} else {
					Root[1].list.push(this.lists.shift())
					Root[1].height += height;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		height: 100%;
		background-color: #f4f5f9;
	}

	.container {
		height: 100%;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		gap: 16rpx;

		.left_list {
			flex: 1;
		}

		.right_list {
			flex: 1;
		}

		.card {
			height: auto;
			padding: 16rpx;
			background-color: #fff;
			border-radius: 16rpx;
			margin-bottom: 16rpx;
			
			&:last-child{
				margin-bottom: 0;
			}

			.card_img {
				width: 100%;
				height: auto;
			}

			.card_info {
				.tit-tip {
					padding: 10rpx 20rpx 0;
					font-size: 30rpx;
					font-weight: 900;
					text-align: justify;
				}

				.bottom-tip {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 20rpx;
					margin-top: 10rpx;

					.profile_container {
						flex: 1;
						display: flex;
						align-items: center;

						.profile {
							width: 50rpx;
							height: 50rpx;
							max-height: 100rpx;
							border-radius: 50%;
							flex-shrink: 1;
						}

						.name {
							flex: 1;
							margin-left: 10rpx;
							font-size: 28rpx;
						}
					}

					.love_btn {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
	}

	/* 多行省略 */
	.multi-line-omit {
		display: -webkit-box; // 作为弹性伸缩盒子模型显示
		overflow: hidden; // 超出的文本隐藏
		text-overflow: ellipsis; // 溢出用省略号显示
		word-break: break-all; // 允许单词内自动换行，如果一个单词很长的话
		-webkit-line-clamp: 2; // 显示的行
		-webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
	}

	/* 单行省略 */
	.one-line-omit {
		width: 100%; // 宽度100%：1vw等于视口宽度的1%；1vh等于视口高度的1%
		overflow: hidden; // 超出的文本隐藏
		text-overflow: ellipsis; // 溢出用省略号显示
		white-space: nowrap; // 溢出不换行
	}
</style>